import React from 'react';

interface ScreenDisplayProps {
  screenData: string;
  backgroundColor?: string;
  className?: string;
  raiseEvent?: (event: string, data: {x:number,y:number}|{x1:number,y1:number,x2:number,y2:number}) => void;
}

const ScreenDisplay: React.FC<ScreenDisplayProps> = ({
  screenData,
  backgroundColor = 'transparent',
  className = '',
  raiseEvent,
}) => {
  const [mousePosition, setMousePosition] = React.useState<{x: number, y: number} | null>(null);
  
  const handleMouseMove = (e: React.MouseEvent<HTMLImageElement>) => {
    const img = e.currentTarget;
    const rect = img.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // 转换为1080*1920分辨率下的坐标
    const scaleX = 1080 / rect.width;
    const scaleY = 1920 / rect.height;
    setMousePosition({
      x: Math.round(x * scaleX),
      y: Math.round(y * scaleY)
    });
  };
  
  const handleDragStart = (e: React.DragEvent<HTMLImageElement>) => {
    e.preventDefault();
  };
  
  
  const [touchStart, setTouchStart] = React.useState<{x: number, y: number} | null>(null);
  const [touchEnd, setTouchEnd] = React.useState<{x: number, y: number} | null>(null);
  
  const handleTouchStart = (e: React.MouseEvent<HTMLImageElement>) => {
    const img = e.currentTarget;
    const rect = img.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const scaleX = 1080 / rect.width;
    const scaleY = 1920 / rect.height;
    setTouchStart({
      x: Math.round(x * scaleX),
      y: Math.round(y * scaleY)
    });
  };
  
  const handleTouchEnd = (e: React.MouseEvent<HTMLImageElement>) => {
    if (touchStart) {
      const img = e.currentTarget;
      const rect = img.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      const scaleX = 1080 / rect.width;
      const scaleY = 1920 / rect.height;
      const endX = Math.round(x * scaleX);
      const endY = Math.round(y * scaleY);
      setTouchEnd({
        x: endX,
        y: endY
      });
      //计算滑动距离
      const distanceX = Math.abs(endX - touchStart.x);
      const distanceY = Math.abs(endY - touchStart.y);
      if (distanceX > 5 || distanceY > 5) {
        // 发送滑动事件到后端
        console.log('滑动从:', touchStart.x, touchStart.y, '到:', endX, endY);
        if(raiseEvent) {
          raiseEvent('swipe', {x1: touchStart.x, y1: touchStart.y, x2: endX, y2: endY});
        }
      }
      else {
        // 发送点击事件到后端
        console.log('点击:', endX, endY);
        if(raiseEvent) {
          raiseEvent('click', {x: endX, y: endY});
        }
      }
    }
    setTouchStart(null);
    setTouchEnd(null);
  };
  
  const imgStyle: React.CSSProperties = {
    objectFit: 'fill',
    backgroundColor,
    maxWidth: '100%',
    maxHeight: '100%',
    aspectRatio: '1080/1920',
  };

  return (
    <div className={`screen-display ${className}`} style={{ backgroundColor }}>
      {screenData && (
        <>
          <img 
            src={`data:image/png;base64,${screenData}`} 
            alt="设备屏幕" 
            style={imgStyle}
            onMouseMove={handleMouseMove}
            onMouseLeave={() => setMousePosition(null)}
            onDragStart={handleDragStart}
            onMouseDown={handleTouchStart}
            onMouseUp={handleTouchEnd}
            draggable={false}
          />
          {mousePosition && (
            <div style={{
              position: 'absolute',
              top: '10px',
              left: '10px',
              backgroundColor: 'rgba(0,0,0,0.7)',
              color: 'white',
              padding: '5px 10px',
              borderRadius: '4px'
            }}>
              坐标: {mousePosition.x}, {mousePosition.y}
            </div>
          )}
        </>
      )}
    </div>
  );
};

export default ScreenDisplay;